<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>任务详情 - UserHub</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#F5222D'
          }
        }
      }
    }
  </script>
  
  <link rel="stylesheet" href="task-detail.css">
</head>
<body class="font-sans bg-gray-50 page-enter">
  <!-- 导航栏 (复用现有导航结构) -->
  <header class="bg-white shadow-sm sticky top-0 z-50">
    <!-- 导航内容省略，与tasks.html保持一致 -->
  </header>

  <main class="container mx-auto px-4 py-8">
    <!-- 返回按钮 -->
    <div class="mb-6">
      <a href="tasks.html" class="inline-flex items-center text-primary hover:text-primary/80">
        <i class="fa fa-arrow-left mr-2"></i> 返回任务列表
      </a>
    </div>
    
    <!-- 任务详情标题区 -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
      <h1 class="text-2xl font-bold mb-2" id="task-title">任务标题</h1>
      <div class="flex flex-wrap gap-3 mb-4">
        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary/10 text-primary" id="task-status">
          <i class="fa fa-spinner mr-1"></i> 进行中
        </span>
        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-warning/10 text-warning" id="task-priority">
          <i class="fa fa-flag mr-1"></i> 中等优先级
        </span>
        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-gray-100 text-gray-700" id="task-deadline">
          <i class="fa fa-calendar mr-1"></i> 截止日期: 2025-9-11
        </span>
        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-gray-100 text-gray-700" id="task-assignee">
          <i class="fa fa-user mr-1"></i> 负责人: 张三
        </span>
      </div>
    </div>
    
    <!-- 数据可视化区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
      <!-- 任务进度趋势图 -->
      <div class="bg-white rounded-xl shadow-sm p-6">
        <h2 class="text-lg font-semibold mb-4">任务进度趋势</h2>
        <div class="chart-container">
          <canvas id="progressChart"></canvas>
        </div>
      </div>
      
      <!-- 任务类型分布图 -->
      <div class="bg-white rounded-xl shadow-sm p-6">
        <h2 class="text-lg font-semibold mb-4">相关任务类型分布</h2>
        <div class="chart-container">
          <canvas id="taskTypeChart"></canvas>
        </div>
      </div>
    </div>
    
    <!-- 任务详情内容 -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
      <!-- 任务详细描述 -->
      <div class="mb-8">
        <h2 class="text-xl font-bold mb-4 flex items-center">
          <i class="fa fa-file-text-o text-primary mr-2"></i>任务描述
        </h2>
        <div class="prose max-w-none text-gray-700 space-y-4" id="task-description">
          <p>本项目旨在开发一套完整的用户管理系统，实现用户注册、登录、权限管理等核心功能。系统将采用前后端分离架构，前端使用Vue.js框架，后端使用Spring Boot框架，数据库采用MySQL。</p>
          <p>项目分为三个主要阶段：</p>
          <ol class="list-decimal pl-5 space-y-2">
            <li>需求分析与系统设计（已完成）</li>
            <li>核心功能开发（进行中）</li>
            <li>系统测试与部署（未开始）</li>
          </ol>
          <p>当前重点工作是完成用户认证模块和权限管理模块的开发，预计在下周五前提交测试版本。</p>
        </div>
      </div>
      
      <!-- 任务相关图片 -->
      <div class="mb-8">
        <h2 class="text-xl font-bold mb-4 flex items-center">
          <i class="fa fa-picture-o text-primary mr-2"></i>设计原型与截图
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="rounded-lg overflow-hidden shadow-sm border border-gray-100 task-image">
            <img src="5.jpg" alt="系统仪表盘设计" class="w-full h-auto object-cover">
            <div class="p-4 bg-gray-50">
              <p class="text-sm text-gray-600">图1: 系统仪表盘设计原型</p>
            </div>
          </div>
          <div class="rounded-lg overflow-hidden shadow-sm border border-gray-100 task-image">
            <img src="6.jpg" alt="用户管理界面" class="w-full h-auto object-cover">
            <div class="p-4 bg-gray-50">
              <p class="text-sm text-gray-600">图2: 用户管理界面设计</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 任务要求 -->
      <div>
        <h2 class="text-xl font-bold mb-4 flex items-center">
          <i class="fa fa-list-alt text-primary mr-2"></i>任务要求
        </h2>
        <div class="bg-gray-50 p-5 rounded-lg border border-gray-100">
          <ul class="space-y-3 text-gray-700">
            <li class="flex items-start">
              <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
              <span>系统需支持至少1000用户同时在线使用</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
              <span>界面需适配移动端和桌面端，响应式设计</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
              <span>需实现完整的用户操作日志记录功能</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
              <span>代码需遵循团队编码规范，提交前需通过ESLint检查</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-exclamation-circle text-warning mt-1 mr-2"></i>
              <span>需提供详细的API文档和部署说明</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- 任务时间线 -->
    <div class="bg-white rounded-xl shadow-sm p-6">
      <h2 class="text-xl font-bold mb-6 flex items-center">
        <i class="fa fa-history text-primary mr-2"></i>任务时间线
      </h2>
      <div class="relative">
        <!-- 时间线轴线 -->
        <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200"></div>
        
        <!-- 时间线节点 -->
        <div class="relative pl-12 pb-8">
          <div class="absolute left-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
            <i class="fa fa-plus"></i>
          </div>
          <div class="text-sm text-gray-500 mb-1">2025-9-01 09:30</div>
          <div class="font-medium">任务创建</div>
          <div class="text-gray-600 mt-1">管理员创建了该任务，分配给张三负责</div>
        </div>
        
        <div class="relative pl-12 pb-8">
          <div class="absolute left-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
            <i class="fa fa-file-text"></i>
          </div>
          <div class="text-sm text-gray-500 mb-1">2025-9-03 14:15</div>
          <div class="font-medium">需求文档更新</div>
          <div class="text-gray-600 mt-1">李四上传了最新的需求分析文档</div>
        </div>
        
        <div class="relative pl-12 pb-8">
          <div class="absolute left-0 w-8 h-8 rounded-full bg-warning flex items-center justify-center text-white">
            <i class="fa fa-spinner"></i>
          </div>
          <div class="text-sm text-gray-500 mb-1">2025-9-05 10:00</div>
          <div class="font-medium">开始开发</div>
          <div class="text-gray-600 mt-1">张三开始进行用户认证模块的开发工作</div>
        </div>
        
        <div class="relative pl-12">
          <div class="absolute left-0 w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-white">
            <i class="fa fa-check"></i>
          </div>
          <div class="text-sm text-gray-500 mb-1">预计 2025-9-11 18:00</div>
          <div class="font-medium text-gray-400">任务完成</div>
          <div class="text-gray-500 mt-1">任务验收并关闭</div>
        </div>
      </div>
    </div>
  </main>

  <script src="task-detail.js"></script>
</body>
</html>
